<template>
  <div class="coupon">
    <div class="valid-list">
      <div class="co-item">
        <div class="co-info">
          <div class="name">蝴蝶园亲子专属活动优惠券</div>
          <div class="remark"><span class="text">仅本次活动使用</span></div>
          <div class="date">有效期：2019.03.01 - 2019.03.07</div>
        </div>
        <div class="co-price">
          <div class="price">
            <span class="unit">￥</span>50
          </div>
        </div>
      </div>
    </div>

    <div class="interval">历史优惠券</div>

    <div class="invalid-list">
      <div class="co-item">
        <div class="co-info">
          <div class="title">长隆团建专属活动优惠券</div>
          <div class="remark"><span class="text">仅本次活动使用</span></div>
          <div class="date">有效期：2019.03.01 - 2019.03.07</div>
        </div>
        <div class="co-price">
          <div class="price">
            <span class="unit">￥</span>50
          </div>
          <div class="status">已使用</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {};
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  methods: {},
  components: {}
};
</script>

<style lang="sass">
@import "../../common/style/variable.sass"

$item-height: 250rpx
page
    100%
    background-color: $theme-bg-color
    padding: 30rpx
    box-sizing: border-box
    .co-item
        padding: 30rpx 14rpx
        background-color: #fff
        position: relative
        >div
            display: inline-block
        .co-info
            width: 70%
            .name
                font-size: 38rpx
                font-weight: bold
            .remark
                color: $theme-color
                font-size: 24rpx
                margin: 26rpx 0
                span
                    padding: 2rpx 8rpx
                    border-radius: 4rpx
                    border: 1px solid $theme-color
            .date
                color: $grey-font-color
                font-size: 28rpx
        .co-price
            width: 30%
            position: absolute
            height: 200rpx
            top: 0
            right: 0
            text-align: right
            .price
                position: absolute
                top: 20rpx
                right: 20rpx
                font-size: 100rpx
                color: $orange-font-color
                font-weight: bold
                .unit
                    font-size: 32rpx
            .status
                position: absolute
                color: $grey-font-color
                bottom: 10rpx
                right: 40rpx
                font-size: 30rpx
                text-align: center
    .valid-list
    .interval
        text-align: center
        font-size: 34rpx
        margin: 50rpx 0
        color: $grey-font-color
    .invalid-list
        color: $grey-font-color
        .co-info
            .remark
                span
                    color: $grey-font-color
                    border-color: $grey-font-color
        .co-price
            .price
                color: $grey-font-color
</style>
